﻿@page "/treemap/legend"


@using Syncfusion.Blazor.TreeMap
@using Syncfusion.Blazor.DropDowns
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample visualizes the 2016 United States presidential election results. The type and position of the legends can be changed using the type and position options in the properties panel.</p>
</SampleDescription>
<ActionDescription>
   <p>In this example, you can see how to see the type and position of the legend available in treemap. The equal color mapping is applied based on certain value. Tooltip is enabled in this example.</p>
   <p>More information about legend can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/treemap/legend'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-9 control-section sb-property-border">
    <SfTreeMap TValue="USAElectionResult" WeightValuePath="Population" EqualColorValuePath="Winner" RangeColorValuePath="WinPercentage" DataSource="@DataSource">
        <TreeMapTitleSettings Text="US Presidential election result - 2016"/>
        <TreeMapLeafItemSettings LabelPath="State" Fill="6699cc">
            <TreeMapLeafColorMappings>
                <TreeMapLeafColorMapping LeafValue="Trump" Color="@LeafColorOne"/>
                <TreeMapLeafColorMapping LeafValue="Clinton" Color="@LeafColorTwo"/>
            </TreeMapLeafColorMappings>
            <TreeMapLeafBorder Color="#FFFFFF" Width="0.5"/>
        </TreeMapLeafItemSettings>
        <TreeMapLegendSettings Visible="true" Mode="@LegendModes" Position="@LegendPositions" Shape="LegendShape.Rectangle"/>
        <TreeMapTooltipSettings Visible="true" Format="<b>${Winner}</b><br>State : ${State}<br>Trump : ${Trump} %<br>Clinton : ${Clinton} %"/>
    </SfTreeMap>
    <div class="urllink">
        Source:
        <a href=" https://en.wikipedia.org/wiki/United_States_presidential_election,_2016" target="_blank">en.wikipedia.org</a>
    </div>
</div>
<div class="col-lg-3 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table style="width:100%" title="Properties">
                <tbody>
                    <tr>
                        <td>
                            Legend Type
                        </td>
                        <td>
                            <SfDropDownList Placeholder="Select smartlabel mode" DataSource="@LegendType" @bind-Value="@LegendTypeValue" Width="120px">
                                <DropDownListEvents TItem="DropdownList" TValue="string" ValueChange="LegendTypeChange"/>
                                <DropDownListFieldSettings Text="Name" Value="Value"/>
                            </SfDropDownList>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Legend Position
                        </td>
                        <td>
                            <SfDropDownList Placeholder="Select intersect action" DataSource="@LegendPositionList" Value="@LegendPositionValue" Width="120px">
                                <DropDownListEvents TItem="DropdownList" TValue="string" ValueChange="LegendPositionChange"/>
                                <DropDownListFieldSettings Text="Name" Value="Value"/>
                            </SfDropDownList>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<style>
    tr {
        height:40px;
    }
    td {
        width: 50%
    }
</style>
@code {
    public string[] LeafColorOne = new string[] { "#D84444" };
    public string[] LeafColorTwo = new string[] { "#316DB5" };
    public LegendMode LegendModes = LegendMode.Default;
    public LegendPosition LegendPositions = LegendPosition.Top;
    public string LegendTypeValue = "Default";
    public string LegendPositionValue = "Top";
    public class DropdownList {
        public string Value { get; set; }
        public string Name { get; set; }
    };
    public List<DropdownList> LegendType = new List<DropdownList> {
        new DropdownList { Value="Default", Name="Default" },
        new DropdownList { Value="Interactive", Name="Interactive" }
    };
    public List<DropdownList> LegendPositionList = new List<DropdownList> {
        new DropdownList { Value="Top", Name="Top" },
        new DropdownList { Value="Bottom", Name="Bottom" },
        new DropdownList { Value="Left", Name="Left" },
        new DropdownList { Value="Right", Name="Right" },
        new DropdownList { Value="Auto", Name="Auto" }
    };
    public void LegendTypeChange(ChangeEventArgs<string, DropdownList> args) {
        LegendTypeValue = args.Value;
        if (args.Value == "Default") {
            LegendModes = LegendMode.Default;
        }
        else {
            LegendModes = LegendMode.Interactive;
        }
    }
    public void LegendPositionChange(ChangeEventArgs<string, DropdownList> args) {
        LegendPositionValue = args.Value;
        if (args.Value == "Top") {
            LegendPositions = LegendPosition.Top;
        }
        else if (args.Value == "Bottom") {
            LegendPositions = LegendPosition.Bottom;
        }
        else if (args.Value == "Left") {
            LegendPositions = LegendPosition.Left;
        }
        else if (args.Value == "Right") {
            LegendPositions = LegendPosition.Right;
        }
        else {
            LegendPositions = LegendPosition.Auto;
        }
    }
    public class USAElectionResult {
        public string State { get; set; }
        public double Trump { get; set; }
        public double Clinton { get; set; }
        public double WinPercentage { get; set; }
        public string Winner { get; set; }
        public double Population { get; set; }
    }
    public List<USAElectionResult> DataSource = new List<USAElectionResult> {
        new USAElectionResult { State="Alabama", Trump=62.9, Clinton=34.6, WinPercentage= 62.9, Winner="Trump", Population=4780127 },
        new USAElectionResult { State="Alaska", Trump=52.9, Clinton=37.7, WinPercentage= 52.9, Winner="Trump", Population=710249},
        new USAElectionResult { State="Arkansas", Trump=60.6, Clinton=33.7, WinPercentage=60.6, Winner="Trump", Population=2915958 },
        new USAElectionResult { State="Arizona", Trump=49.5, Clinton=45.4, WinPercentage=49.5, Winner="Trump", Population=6392307 },
        new USAElectionResult { State="California",  Trump=32.8, Clinton=61.6, WinPercentage= 61.6, Winner="Clinton", Population=37252895},
        new USAElectionResult { State="Colorado",  Trump=47.3, Clinton=44.4, WinPercentage= 47.3, Winner="Trump", Population=5029324 },
        new USAElectionResult { State="Connecticut",  Trump=41.2, Clinton=54.5, WinPercentage= 54.5, Winner="Clinton", Population=3574118},
        new USAElectionResult { State="Delaware",  Trump=53.4, Clinton=41.9, WinPercentage= 53.4, Winner="Trump", Population=897936 },
        new USAElectionResult { State="District of Columbia",   Trump=4.1, Clinton=92.8, WinPercentage= 92.8, Winner="Clinton", Population=693972 },
        new USAElectionResult { State="Florida", Trump=49.1, Clinton=47.8, WinPercentage= 49.1, Winner="Trump", Population=18804623},
        new USAElectionResult { State="Georgia", Trump=51.3, Clinton=45.6, WinPercentage=51.3, Winner="Trump", Population=9688681},
        new USAElectionResult { State="Hawaii",  Trump=62.2, Clinton=30, WinPercentage=62.2, Winner="Trump", Population=1360301 },
        new USAElectionResult { State="Idaho", Trump=59.2, Clinton=27.6, WinPercentage= 59.2, Winner="Trump", Population=1567652 },
        new USAElectionResult { State="Illinois",  Trump=55.4, Clinton=39.4, WinPercentage= 55.4, Winner="Trump", Population=12831549  },
        new USAElectionResult { State="Indiana", Trump=57.2, Clinton=37.9, WinPercentage=57.2, Winner="Trump", Population=6484229 },
        new USAElectionResult { State="Iowa", Trump=51.8, Clinton=42.2, WinPercentage=51.8, Winner="Trump", Population=3046869  },
        new USAElectionResult { State="Kansas", Trump=57.2, Clinton=36.2, WinPercentage=57.2, Winner="Trump", Population=2853132, },
        new USAElectionResult { State="Kentucky", Trump=62.5, Clinton=32.7, WinPercentage=62.5, Winner="Trump", Population=4339349 },
        new USAElectionResult { State="Louisiana", Trump=58.1, Clinton=38.4, WinPercentage=58.1, Winner="Trump", Population=4533479 },
        new USAElectionResult { State="Maine",  Trump=45.2, Clinton=47.9, WinPercentage=47.9, Winner="Clinton", Population=1328361},
        new USAElectionResult { State="Maryland",  Trump=35.3, Clinton=60.5, WinPercentage=60.5, Winner="Clinton", Population=5773785 },
        new USAElectionResult { State="Massachusetts",  Trump=33.5, Clinton=60.8, WinPercentage=60.8, Winner="Clinton", Population=6547817 },
        new USAElectionResult { State="Michigan", Trump=47.6, Clinton=47.3, WinPercentage=47.6, Winner="Trump", Population=9884129 },
        new USAElectionResult { State="Minnesota",  Trump=45.4, Clinton=46.9, WinPercentage=46.9, Winner="Trump", Population=5303925 },
        new USAElectionResult { State="Mississippi", Trump=58.3, Clinton=39.7, WinPercentage=58.3, Winner="Trump", Population=2968103  },
        new USAElectionResult { State="Missouri", Trump=57.1, Clinton=38.0, WinPercentage=57.1, Winner="Trump", Population=5988927  },
        new USAElectionResult { State="Montana", Trump=56.5, Clinton=36.0, WinPercentage= 56.5, Winner="Trump", Population=989417 },
        new USAElectionResult { State="Nebraska", Trump=60.3, Clinton=34.0, WinPercentage=60.3, Winner="Trump", Population=1826341 },
        new USAElectionResult { State="Nevada",  Trump=45.5, Clinton=47.9, WinPercentage=47.9, Winner="Clinton", Population=2700691  },
        new USAElectionResult { State="New Hampshire",  Trump=47.2, Clinton=47.6, WinPercentage= 47.6, Winner="Clinton", Population=1316466 },
        new USAElectionResult { State="New Jersey",  Trump=41.8, Clinton=55.0, WinPercentage=55, Winner="Clinton", Population=8791936},
        new USAElectionResult { State="New Mexico",  Trump=40.0, Clinton=48.3, WinPercentage=48.3, Winner="Clinton", Population=2059192 },
        new USAElectionResult { State="New York",  Trump=37.5, Clinton=58.8, WinPercentage=58.8, Winner="Clinton", Population=19378087},
        new USAElectionResult { State="North Carolina", Trump=50.5, Clinton=46.7, WinPercentage=50.5, Winner="Trump", Population=9535692 },
        new USAElectionResult { State="North Dakota", Trump=64.1, Clinton=27.8,  WinPercentage=64.1, Winner="Trump", Population=672591 },
        new USAElectionResult { State="Ohio", Trump=52.1, Clinton=43.5,  WinPercentage=52.5, Winner="Trump", Population=11536725 },
        new USAElectionResult { State="Oklahoma", Trump=65.3, Clinton=28.9, WinPercentage= 65.3, Winner="Trump", Population=3751616 },
        new USAElectionResult { State="Oregon",  Trump=41.1, Clinton=51.7, WinPercentage=51.7, Winner="Clinton", Population=3831073  },
        new USAElectionResult { State="Pennsylvania", Trump=48.8, Clinton=47.6, WinPercentage= 48.8, Winner="Trump", Population=12702887},
        new USAElectionResult { State="Rhode Island",  Trump=39.8, Clinton=55.4, WinPercentage= 55.4, Winner="Clinton", Population=1052931 },
        new USAElectionResult { State="South Carolina", Trump=54.9, Clinton=40.8, WinPercentage=54.9, Winner="Trump", Population=4625401},
        new USAElectionResult { State="South Dakota", Trump=61.5, Clinton=31.7, WinPercentage= 61.5, Winner="Trump", Population=814191 },
        new USAElectionResult { State="Tennessee", Trump=61.1, Clinton=34.9, WinPercentage=61.1, Winner="Trump", Population=6346275},
        new USAElectionResult { State="Texas", Trump=52.6, Clinton=43.4, WinPercentage=52.6, Winner="Trump", Population=25146105 },
        new USAElectionResult { State="Utah", Trump=45.9, Clinton=27.8, WinPercentage=45.9, Winner="Trump", Population=2763888, },
        new USAElectionResult { State="Vermont",  Trump=39.7, Clinton=61.1,  WinPercentage=61.1, Winner="Clinton", Population=625745 },
        new USAElectionResult { State="Virginia",  Trump=45.0, Clinton=49.9, WinPercentage=49.9, Winner="Clinton", Population=8001045},
        new USAElectionResult { State="Washington",  Trump=4.1, Clinton=92.8, WinPercentage=92.8, Winner="Clinton", Population=6724543 },
        new USAElectionResult { State="Wisconsin", Trump=68.7, Clinton=26.5, WinPercentage=68.7, Winner="Trump", Population=5687289},
        new USAElectionResult { State="West Virginia", Trump=47.9, Clinton=46.9, WinPercentage=47.9, Winner="Clinton", Population=1853011 },
        new USAElectionResult { State="Wyoming", Trump=70.1, Clinton=22.5, WinPercentage=70.1, Winner="Trump", Population=583767 }
    };
}